<!DOCTYPE html>
<html class="demoFrame">

<head lang="en">
	<meta charset="UTF-8">
	<title>DomLastic.js</title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<meta name="description" content="">

	<!-- jQuery -->
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="assets/jquery-ui.js"></script>

	<!-- domLastic.js -->
	<script type="text/javascript" src="dist/domlastic.js"></script>
	<link rel="stylesheet" href="assets/demopage-styles.css" type="text/css" />

	<!-- set example DomLastic events -->
	<script>
		$(document).ready(function() {

			domLastic.init({
				itemsClassnameToConnect: 'item', //cssSelector for items to join
			});

			$('.container-1 .listToAnimate').animate({
				top: 0
			}, 500, 'easeInQuad', function() {
				domLastic.animateItems();
			});
			$('.listToAnimate').draggable({
				axis: 'y',
				stop: function(event, ui) {
					$('.container-1 .listToAnimate').animate({
						top: 0
					}, 200, 'easeInQuad', function() {
						domLastic.animateItems();
					});
				}
			});

		});
	</script>

	<body class="demoFrame">
		<div class="demoFrame-1-header">
			<h2>Example 1:<br>Init DomLastic and trigger animation on drag stop event</h2>
		</div>
		<div class="code">
			<span class="color-1">domLastic</span><span class="color-2">.init</span>({<br> &nbsp;&nbsp;itemsClassnameToConnect: <span class="color-3">'item'</span><br> });
			<br>
			<span class="comment">//if drag stopped...</span><br>
			<span class="color-1">domLastic</span><span class="color-2">.animateItems();</span><br><br>
		</div>
		<div class="container container-1">
			<h3>拖动下面的项目</h3>
			<div class="listToAnimate">
				<div class="item white left">FloralWhite</div>
				<div class="item green right">Khaki</div>
				<div class="item white left">SandyBrown</div>
				<div class="item green right">Gainsboro</div>
				<div class="item green right">MediumSeaGreen</div>
				<div class="item green right">MediumSeaGreen</div>
				<div class="item white left">Teal</div>
				<div class="item green right">YellowGreen</div>
				<div class="item white left">Sienna</div>
				<div class="clear"></div>

			</div>
			<div class="reload" onclick="location.reload();">↻</div>
		</div>
	</body>

</html>
